<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="get">get</button>
    <button class="post">post</button>
</body>
<script>
    var getBtn = document.getElementsByClassName("get")[0];
    var postBtn = document.getElementsByClassName("post")[0];


    getBtn.onclick = function () {

        // "id=${id}&ch=${ch}&mh=${mh}&en=${en}"

        // get("../php/isExistUser.php", "user=a1231231", true, "json", function (res) {
        //     console.log("请求结束", res);
        //     var { status, msg } = res;
        //     alert(msg);

        // })

        var id = 1;
        var ch = 55;
        var mh = 66;
        var en = 77;

        // get("../php/updateGradeByIdGet.php", `id=${id}&ch=${ch}&mh=${mh}&en=${en}`, true, "json", function (res) {
        //     console.log("请求结束", res);
        //     var { status, msg } = res;
        //     alert(msg);

        // })

        // 问题? .
        // 多参数传参 讲究一一对应 ,如果参数顺序不同  => 结果就大不一样
        // 有没有什么方法? 可以让参数排名不分先后


        get(`id=${id}&ch=${ch}&mh=${mh}&en=${en}`, "../php/updateGradeByIdGet.php", true, "json", function (res) {
            console.log("请求结束", res);
            var { status, msg } = res;
            alert(msg);

        })
    }

    // url      请求地址
    // data     传递的数据
    // async    是否异步
    // dataType 接口返回的数据类型 (text(默认)/html/json)
    // success  回调函数 => 请求成功时执行的内容 (回调函数有一个形式参数  用于接收接口返回的结果)


    // setTimeout(function(data){},10000000,1000)

    function get(url, data = "", async = true, dataType = "text", success) {
        // var success = function (res) {   //形式参数
        //     console.log("请求结束",res);
        // }

        var xhr = new XMLHttpRequest();

        xhr.open("get", data ? url + "?" + data : url, async);

        xhr.send();

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;
                console.log(result);
                if (dataType == "json") {  // 如果用户说 返回的数据是json => JSON.parse();
                    result = JSON.parse(result);
                }
                console.log(result);

                // 获取接口响应的结果之后  => 用户执行的内容并不是固定的
                if (success) {
                    success(result);   // 回调函数在执行过程中 => 将请求的结果作为实际参数传入
                }

            }
        }
    }






</script>

</html>